<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style type="text/css">
		body{
			-webkit-perspective:500px;
		}
		.out{
			width: 300px;
			height: 300px;
			margin: 0 auto; 
			border: 1px solid blue;
			/*perspective设置在场景元素上*/
			-webkit-perspective:500px;
			-webkit-perspective-origin:40px 40px;
			-webkit-transform: rotateY(40deg);
			/*保留子元素的3D变换*/
			-webkit-transform-style:preserve-3d; 
		}
		.inner{
			width: 200px;
			height: 200px;
			margin: 50px 0 0 50px;
			border: 1px solid red;
			/*-webkit-transform-origin:top center 100px;*/
			-webkit-transform: rotateX(60deg);
		}

		


		</style>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
		
		</script>
	</head>
	<body>
		<div class="out">
			<div class="inner"></div>
		</div>

		

	</body>
</html>